// import { throttle } from "@pureadmin/utils";
import {emitter} from "@/utils/mitt";

export class CanvasRenderer {
  //  canvas= null
  //  ctx=null
  //  images: {
  //   img: HTMLImageElement;
  //   x: number;
  //   y: number;
  //   width: number;
  //   height: number;
  // }[];
  //  container;
  //  positionX: number;
  //  isDragging: boolean;
  //  startX: number;

  constructor(containerId) {
    this.canvas = document.createElement("canvas")
    this.ctx = this.canvas.getContext("2d")
    this.images = [];
    this.positionX = 0;
    this.isDragging = false;
    this.startX = 0;

    this.container = document.getElementById(containerId);
    if (this.container) {
      this.container.appendChild(this.canvas);
      this.canvas.width = this.container.clientWidth;
      this.canvas.height = this.container.clientHeight;
    }
  }

  addImage(
      url,
      x,
      y,
      width,
      height
  ) {
    const img = new Image();
    img.src = url;

    this.images.push({
      img,
      x,
      y,
      width,
      height
    });

    this.render();
  }

  render() {
    this.clearRect();

    this.images.forEach(imgProps => {
      const x = imgProps.x + this.positionX;
      this.ctx.drawImage(
          imgProps.img,
          x,
          imgProps.y,
          imgProps.width,
          imgProps.height
      );
    });
  }

  clearImages() {
    this.images = [];
  }

  clearRect() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

  drawTick(event) {
    this.render();

    // 当前勾选图片的索引
    const index =
        Math.ceil(
            (Math.abs(this.positionX) + event.offsetX) / this.images[0].width
        ) - 1;
    const x = event.offsetX;
    const y = event.offsetY;

    // 绘制样式
    this.ctx.strokeStyle = "red";
    this.ctx.lineWidth = 4;
    this.ctx.lineCap = "round";

    // 绘制对勾
    this.ctx.beginPath();
    this.ctx.moveTo(x - 10, y);
    this.ctx.lineTo(x, y + 10);
    this.ctx.lineTo(x + 15, y - 10);
    this.ctx.stroke();

    emitter.emit("imageInfo", this.images[index]);
  }

  addListener() {
    if (!this.canvas) return;
    this.canvas.addEventListener("click", this.handleClick);
    this.canvas.addEventListener("mousedown", this.handleMouseDown);
    this.canvas.addEventListener("mousemove", this.handleMouseMove);
    this.canvas.addEventListener("mouseup", this.handleMouseUp);
    this.canvas.addEventListener("touchstart", this.handleTouchStart);
    this.canvas.addEventListener("touchmove", this.handleTouchMove);
    this.canvas.addEventListener("touchend", this.handleTouchEnd);
    // window.addEventListener("resize", throttle(this.handleWindowResize, 200));
  }

  handleClick = (event) => {
    this.drawTick(event);
  };

  handleMouseDown = (event) => {
    this.startDrag(event.clientX);
  };

  handleMouseMove = (event) => {
    this.drag(event.clientX);
  };

  handleMouseUp = () => {
    this.endDrag();
  };

  handleTouchStart = (event) => {
    if (event.touches.length === 1) {
      event.preventDefault();
      this.startDrag(event.touches[0].clientX);
    }
  };

  handleTouchMove = (event) => {
    if (event.touches.length === 1) {
      event.preventDefault();
      this.drag(event.touches[0].clientX);
    }
  };

  handleTouchEnd = () => {
    this.endDrag();
  };

  startDrag(clientX) {
    this.canvas.style.cursor = "grabbing";
    this.canvas.style.userSelect = "none";

    this.startX = clientX;
    this.isDragging = true;
  }

  drag(clientX) {
    if (!this.isDragging) return;

    const deltaX = clientX - this.startX;
    const maxPositionX =
        this.images.length * this.images[0].width - this.container.clientWidth;
    this.positionX = Math.max(
        Math.min(this.positionX + deltaX, 0),
        -maxPositionX
    );
    this.startX = clientX;

    this.render();
  }

  endDrag() {
    this.canvas.style.cursor = "grab";
    this.canvas.style.userSelect = "auto";
    this.isDragging = false;
  }

  // private handleWindowResize = () => {
  //   this.canvas.width = this.container.clientWidth;
  //   this.canvas.height = this.container.clientHeight;
  //   this.render();
  // };
}
